<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			div{
				width: 1300px;
				height: 300px;
				border: 1px solid black;
				margin: 150px auto;
			}
			ul{
				margin: 0;
				padding: 0;
				overflow: hidden;				
			}
			ul li{
				list-style: none;
				float: left;
				width: 216px;
				height: 300px;
				transition: width 1s;
			}
			ul:hover li{
				width: 126px;
			}
			ul li:hover {
				width: 670px;
			}			
		</style>
	</head>
	<body>
		<div>
			<ul>
				<li><img src="img/ad1.jpg"/></li>
				<li><img src="img/ad2.jpg"/></li>
				<li><img src="img/ad3.jpg"/></li>
				<li><img src="img/ad4.jpg"/></li>
				<li><img src="img/ad5.jpg"/></li>
				<li><img src="img/ad6.jpg"/></li>
			</ul>
		</div>
	</body>
</html>
